<template>
  <view class="register">
    <uni-nav-bar title="注册页面" rightText="取消" @clickRight="$back()"></uni-nav-bar>
    <view class="main u-f u-f-jsa u-f-ac">
      <image class="left_img" src="../../static/index/reg_bg.png" mode=""></image>
      <view class="info">
        <view class="row">
          <text>头像</text>
          <view style="flex: 1;text-align: center;">
            <image class="headimg" :src="faceBaceUrl" mode="aspectFill"></image>
            <!-- <view class="upload" @click="chooseimg" :class="{'empty':empty=='photo'}">
              <span class="iconfont icon-shangchuan"></span>
              上传照片
            </view> -->
          </view>


        </view>
        <view class="row">
          <text>姓名</text>
          <view>
            <input type="text" v-model="form.studentName" placeholder="请输入名字" placeholder-class="placeholder_class"
              @blur="inputBlur('studentName',$event)" :class="{'empty':empty=='studentName'}" @confirm="$hideKeyboard()" />
          </view>
        </view>
        <view class="row">
          <text>性别</text>
         <!-- <radio-group @change="radioChange" class="u-f">
            <label class="u-f-ac" v-for="(item, index) in sexs" :key="index">
              <radio :value="index" :checked="index === form.sex" style="transform: scale(0.5);" />
              <text>{{item}}</text>
            </label>
          </radio-group> -->
          <view class="transverse u-f-ac">
            <view v-for="(item,index) in sexs" :key="index" @tap="radioChange(index)" class="u-f-ac margin-lr" style="height: 100%;">
              <view class="radio" :class="[form.sex===index?'check-border':'']">
                <view class="circle"></view>
              </view>
              <text>{{item}}</text>
            </view>
          </view>

        </view>
        <view class="row">
          <text>年级</text>
          <picker @change="PickerChange('education',$event)" :range="educations" :value="form.education">
            <view class="input_text u-f" :class="{'empty':empty=='education'}">
              <view class="flex1" :class="{'placeholder_class':form.education===''}">{{form.education===''?'请选择':educations[form.education]}}</view>
              <span class="iconfont icon-jiantou9"></span>
            </view>

          </picker>
        </view>
        <view class="row">
          <text>地区</text>
          <picker mode="multiSelector" :value="areaValue" :range="[areaList,areaList[areaIndex].children]" @change="cityChange"
            @columnchange="columnchange" range-key="name">
            <view class="input_text u-f" :class="{'empty':empty=='cityId'}">
              <view class="flex1" :class="{'placeholder_class':!provinceName&&!cityName}">{{!provinceName&&!cityName?'请选择':`${provinceName} ${cityName}`}}</view>
              <span class="iconfont icon-jiantou9"></span>
            </view>
          </picker>
          <!-- <picker @change="PickerChange" :range="sexs">
            <view class="input_text u-f" :class="{'empty':empty=='cityId'}">
              <view class="flex1" :class="{'placeholder_class':form.sex===''}">{{form.sex===''?'请选择':sexs[form.sex]}}</view>
              <span class="iconfont icon-jiantou9"></span>
            </view>
          
          </picker> -->
        </view>

        <view class="row" @click="clickSchool">
          <text>学校</text>
          <!-- <view class="input_text u-f" :class="{'empty':empty=='schoolId'}"> -->
            <uniCombox  ref="unicombox" :range="schoolList" range-key="schoolTitle"  placeholder="请选择" :class="{'empty':empty=='schoolId'}" style="width: 33vw;" @input="selectSchoolChang"></uniCombox>
          <!-- </view> -->
          
          <!-- <picker @change="PickerChange('schoolId',$event)" :range="schoolList" range-key="schoolTitle" @click="clickSchool"
            :disabled="form.cityId.length<=0" :value="schoolIndex">
            <view class="input_text u-f" :class="{'empty':empty=='schoolId'}">
              <view class="flex1" :class="{'placeholder_class':schoolIndex===''}">{{schoolIndex===''?'请选择':schoolList[schoolIndex].schoolTitle}}</view>
              <span class="iconfont icon-jiantou9"></span>
            </view>

          </picker> -->
        </view>
        <view class="row">
          <text>班级</text>
<!--          <view class="u-f-jsb flex1"> -->
          <picker @change="PickerChange('grade',$event)" :range="gradeList" @click="clickClass('education','年级未填')"
            :disabled="form.education===''" :value="form.grade">
            <view class="input_text u-f width15vw" :class="{'empty':empty=='grade'}">
              <view class="flex1" :class="{'placeholder_class':form.grade===''}">{{form.grade===''?'请选择':gradeList[form.grade]}}</view>
              <span class="iconfont icon-jiantou9"></span>
            </view>

          </picker>
          <picker @change="PickerChange('classId',$event)" :range="classList" range-key="classTitle" @click="clickClass('schoolId','学校未填')"
            :disabled="form.schoolId==''" :value="form.classId">
            <view class="input_text u-f width15vw" :class="{'empty':empty=='classId'}">
              <view class="flex1" :class="{'placeholder_class':form.classId===''}">{{form.classId===''?'请选择':classList[form.classId]}}</view>
              <span class="iconfont icon-jiantou9"></span>
            </view>

          </picker>
          <!-- </view> -->
        </view>
        <view class="row">
          <text>手机号</text>
          <view class="">
            <input ref="phone" type="number" maxlength="11" v-model="form.phone" placeholder="请输入手机号" placeholder-class="placeholder_class"
              @blur="inputBlur('phone',$event)" :class="{'empty':empty=='phone'}" @confirm="$hideKeyboard()" />
          </view>
        </view>
        <er-button style="margin-top:64upx;" title="注册" :isloading='isloading' :isSuccess='isSuccess' @btnClick="regClick"></er-button>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  import uploadImage from '@/components/ossutil/uploadFile.js';
  import uniCombox from '@/components/uni-combox/uni-combox.vue';
  
  export default {
    components:{
      uniCombox
    },
    computed: { ...mapState(['userInfo', 'faceBaceUrl'])
    },
    data() {
      return {
        form: {
          photo: this.faceBaceUrl,
          studentName: '',
          sex: 0,
          cityId: '',
          provinceId: '',
          education: 0,
          phone: '',
          schoolId: '',
          classId: '',
          macAddress: '',
          areaId: '',
          grade: 2
        },
        cityName: '',
        provinceName: '',
        areaList: [{
          children: []
        }],
        areaIndex: 0, //地区第一列索引值
        educations: ['初中', '高中'],
        sexs: ['女', '男'],
        schoolList: [],
        // schoolIndex: '',
        gradeList: ['初一', '初二', '初三'],
        classList: ['1班', '2班', '3班', '4班', '5班', '6班', '7班', '8班', '9班', '10班', '11班', '12班', '13班', '14班', '15班',
          '16班', '17班', '18班', '19班', '20班'
        ],
        isloading: false,
        isSuccess: false,
        empty: '', //失焦空样式
        areaValue: [] //地区选择器所选索引值
      }
    },
    onLoad() {
      this.getAreaList()
    },
    methods: {
      ...mapMutations(['setUserInfo']),
      //获取地区列表
      getAreaList() {
        this.$http.get('/area/pad/list/all', {
          params: {
            parentId: 0
          }
        }).then(res => {
          this.areaList = res.data
        })
      },
      // 获取学校列表
      getSchoolList() {
        // 初中 市的id 高中省的id
        let regionId = this.form.education === 1 ? this.form.provinceId : this.form.cityId
        this.$http.get('/school/list', {
          params: {
            education: this.form.education,
            schooltitle: '',
            size: 10,
            page: -1,
            regionId: regionId
          }
        }).then(res => {
          this.schoolList = res.data.data
        })
      },
      // 点击学校时关联地区/年级是否未填
      clickSchool() {
        if (!this.$utils.validate({
            rule: /\S/,
            msg: '年级未填'
          }, this.form.education)) {
          this.empty = 'education'
          return false
        }
        if (!this.$utils.validate({
            rule: /\S/,
            msg: '地区未填'
          }, this.form.cityId)) {
          this.empty = 'cityId'
          return false
        }
    
      },
      //点击班级选择器
      clickClass(obj, msg) {
        if (!this.$utils.validate({
            rule: /\S/,
            msg: msg
          }, this.form[obj])) {
          this.empty = obj
          return false
        }
      },
      // 文本失焦事件
      inputBlur(obj, e) {
        if (!e.detail.value) {
          this.empty = obj
        } else {
          this.empty = ''
        }
      },
      radioChange(e) {
        this.form.sex = e
      },
      selectSchoolChang(val,index){
        if(index!==''){
            this.form.areaId = this.schoolList[index].areaId
        this.form.schoolId = this.schoolList[index].id
        console.log(this.form)
        }
      
      },
      // 性别、年级/学校/班级选择器事件
      PickerChange(obj, e) {
        if (e.detail.value === '') {
          this.empty = obj
        } else {
          this.empty = ''
        }
        if (obj === "education") {
          this.form[obj] = e.detail.value

          if (e.detail.value == 0) {
            this.gradeList = ['初一', '初二', '初三']
          } else {
            this.gradeList = ['高一', '高二', '高三']
          }

        } else {
          this.form[obj] = e.detail.value
        }

      },
      // 城市选择器
      cityChange(e) {
        this.provinceName = this.areaList[e.detail.value[0]].name
        this.cityName = this.areaList[e.detail.value[0]].children.length > 0 ? this.areaList[e.detail.value[0]].children[
          e.detail.value[1]].name : ''
        this.form.provinceId = this.areaList[e.detail.value[0]].id
        this.form.cityId = this.areaList[e.detail.value[0]].children.length > 0 ? this.areaList[e.detail.value[0]].children[
          e.detail.value[1]].id : this.form.provinceId
        this.areaValue = [e.detail.value[0], e.detail.value[1]]
        // this.schoolIndex = ''
          this.getSchoolList()
      },
      // 地区选择列
      columnchange(e) {
        console.log(e.detail)
        // 移动第一列
        if (e.detail.column == 0) {
          this.areaValue = [e.detail.value, 0]
          this.areaIndex = e.detail.value
        }

      },
      // 正则检测是否为空
      isCheck() {
        for (var item in this.form) {
          console.log(item)
          if (!this.$utils.validate({
              rule: /\S/,
              msg: '必填项未填'
            }, this.form[item])) {
            this.empty = item
            return false
          }
        }
        return true
      },
      // 点击注册按钮
      async regClick() {
        let obj=await this.$utils.GetMacAdress()
        this.form.macAddress =obj.uuid
        this.form.className = this.gradeList[this.form.grade] + this.classList[this.form.classId]
        if (this.isCheck()) {
          this.isloading = true
          console.log(this.form)
          this.$http.post('/face', {
            baseStr: this.faceBaceUrl,
            ...this.form
          }).then(res => {
            this.isloading = false
            if (res.status === 0) {
              this.isSuccess = true
              console.log(res)
              this.$setStorage('token', res.data.token)
              this.$setStorage('user', JSON.stringify(res.data.student))
              this.setUserInfo(res.data.student)
              this.$showToast('注册成功', '', 'success')
              this.$redirectTo('/pages/index/home')
            } else {
              this.$showToast(res.msg)
            }
             
          })

        }

      },
      chooseimg() {
        uni.chooseImage({
          count: 1,
          sizeType: ['camera', 'original'],
          // 从相册选择
          sourceType: ['album'],
          success: (chooseImageRes) => {
            if (chooseImageRes.errMsg === "chooseImage:ok") {
              //显示消息提示框
              uni.showLoading({
                mask: true
              })
              // console.log(chooseImageRes.tempFilePaths[0])
              //上传图片
              //图片路径可自行修改
              this.$utils.uploadFile(chooseImageRes.tempFilePaths[0]).then(res => {
                this.form.photo = res
                uni.hideLoading();
              }).catch(res => {
                console.log(res)
              })

            }
          }
        })
      },
    }
  }
</script>

<style lang="scss">
  page {
    height: 100%;
  }

  .empty {
    border: 1px solid #F55555 !important;
  }
.transverse{
  @include transverse
}
  .register {
    height: 100%;
    background-color: $bg_color;

    .main {
      height: calc(100vh - var(--status-bar-height) - 8vh);

      .left_img {
        width: px2vw(870);
        height: px2vh(730);
      }

      .info {
        background: #FFFFFF;
        box-shadow: 0px 4px 20px 0px rgba(0, 160, 240, 0.1);
        border-radius: 20px;
        padding-bottom: px2vw(15);

        .headimg {
          width: px2vw(140);
          height: px2vw(140);
          border-radius: 50%;
        }

        .upload {
          height: px2vh(32);
          line-height: px2vh(32);
          background: #FFFFFF;
          border: 1px solid rgba(0, 0, 0, 0.15);
          font-size: px2vw(14);
          color: rgba(0, 0, 0, 0.65);
          text-align: center;
          margin-left: px2vw(64);
        }

        .icon-shangchuan {
          color: #cccccc;
          font-size: px2vw(14);
        }
      }

      .row {
        margin: px2vh(25) px2vh(80) 0upx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text{
          &:first-child{
            margin-right:px2vw(10) ;
          }
        }
      }

      .width15vw {
        width: px2vw(300);
      }
    }
  }
</style>
